//渲染商品详情 + 放大镜
//1.获取列表页传入的sid(地址栏),设置默认值
let sid = location.search.substring(1).split('=')[1];
if (!sid) {
    sid = 1;
}

! function detail() {
    //2.将sid传入后端，后端将对应的数据返回前端
    $.ajax({
        url: 'http://localhost/taobao/php/detail.php',
        data: {
            sid: sid
        },
        dataType: 'json'
    }).done(function(data) {
        //获取对应的数据，直接将数据添加给对应的元素对象。
        $('#spic img').attr('src', data.url);
        $('.loadtitle').html(data.title);
        $('.loadpcp').html(data.price);
        $('#bpic').attr('src', data.url);
        //渲染放大镜下面的小图 - 改变数据库。
        let picarr = data.piclist.split(','); //获取小图的地址，变成数组。
        let str = '';
        $.each(picarr, function(index, value) {
            str += `
                <li><img src="${value}"/></li>
            `;
        });
        $('#list ul').html(str);

        //放大镜效果 - 这里编写不使用事件委托。渲染下面直接获取任意元素包括渲染的元素。
        //比例公式：大图/小图 = 大放/小放
        //鼠标移入计算小放的尺寸 + 比例
        const wrap = $('.wrap'); //包含框
        const spic = $('#spic'); //小图
        const sf = $('#sf'); //小放
        const bf = $('#bf'); //大放
        const bpic = $('#bpic'); //大图
        const left = $('#left'); //左右箭头
        const right = $('#right'); //左右箭头
        const listul = $('#list ul'); //运动的小图的列表
        //鼠标移入小图，显示小放和大放
        spic.hover(function() {
            sf.css('visibility', 'visible');
            bf.css('visibility', 'visible');
            //设置小放的尺寸和放大的比例
            sf.css({
                width: bf.outerWidth() * spic.outerWidth() / bpic.outerWidth(),
                height: bf.outerHeight() * spic.outerHeight() / bpic.outerHeight()
            });
            //求比例
            let bili = bpic.outerWidth() / spic.outerWidth();
            //鼠标小图移动，小放跟随鼠标。
            spic.on('mousemove', function(ev) {
                let l = ev.pageX - wrap.offset().left - sf.outerWidth() / 2;
                let t = ev.pageY - wrap.offset().top - sf.outerHeight() / 2;
                if (l <= 0) {
                    l = 0;
                } else if (l >= spic.outerWidth() - sf.outerWidth()) {
                    l = spic.outerWidth() - sf.outerWidth();
                }

                if (t <= 0) {
                    t = 0;
                } else if (t >= spic.outerHeight() - sf.outerHeight()) {
                    t = spic.outerHeight() - sf.outerHeight();
                }
                //小放移动
                sf.css({
                    left: l,
                    top: t
                });
                //大图移动
                bpic.css({
                    left: -l * bili,
                    top: -t * bili
                });

            });
        }, function() {
            sf.css('visibility', 'hidden');
            bf.css('visibility', 'hidden');
        })

        //点击下面的小图，图片进行切换
        const picli = $('#list ul li');
        picli.on('mouseover', function() {
            //获取当前点击li元素内部的图片地址
            let url = $(this).find('img').attr('src');
            $('#spic img').attr('src', url); //赋值小图
            $('#bpic').attr('src', url); //赋值大图
        });

        //li下面的小图利用左右箭头运动，每次点击箭头运动一张。
        //思路：
        //无序列表ul进行运动
        //li显示的张数
        //1个li的宽度
        let num = 6; //显示6张小图
        let liwidth = picli.eq(0).outerWidth(true); //包括外边距的盒模型的尺寸。
        right.on('click', function() {
            if (picli.length > num) {
                num++;
                left.css('color', '#333');
                if (num === picli.length) { //如果num=10，没有小图了，隐藏右箭头
                    right.css('color', '#fff');
                }
                listul.animate({ //运动
                    left: -liwidth * (num - 6)
                });
            }
        });
        left.on('click', function() {
            if (num > 6) {
                num--;
                right.css('color', '#333');
                if (num === 6) { //如果num=10，没有小图了，隐藏右箭头
                    left.css('color', '#fff');
                }
                listul.animate({ //运动
                    left: -liwidth * (num - 6)
                });
            }
        });

    });
}();

//购物车
! function goodscart() {
    //购物车本地存储的核心：商品编号和商品数量。
    let arrsid = []; //商品编号  [2,5,7,9]
    let arrnum = []; //商品数量  [13,25,27,19]

    //点击加入购物车按钮,确定是第一次点击还是多次点击。
    //思路：如果不是第一次点击加入购物车按钮，本地存储中一定存在当前商品的信息。利用先获取本地存储的信息(提前约定好本地存储的key值)，然后进行判断。
    function getlocalStorage() {
        if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) { //如果存在，获取
            arrsid = localStorage.getItem('localsid').split(',') //[2,5,7,9]
            arrnum = localStorage.getItem('localnum').split(',') //[13,25,27,19]
        } else { //不存在本地存储，数组为空
            arrsid = [];
            arrnum = [];
        }
    }
    //表单验证
    $('#count').on('input', function() {
        //判断数量框一定是数字 - 正则实现
        let reg = /^\d+$/; //匹配一个或者多个数字
        let inputvalue = $('#count').val();
        if (reg.test(inputvalue)) {
            $('#count').val(inputvalue);
        } else {
            $('#count').val(1);
        }
    });
    //添加本地存储
    $('.p-btn a').on('click', function() {
        let inputvalue = $('#count').val();
        //判断是第一次还是多次
        getlocalStorage(); //获取本地存储，转换成数组了。
        if (arrsid.includes(sid)) { //当前商品的sid存在,仅需要商品的数量发生改变
            //商品的sid和商品的数量是一一对应的关系，通过商品的sid找到对应的数量。
            //先获取sid在存sid数组中的索引位置
            let index = arrsid.indexOf(sid); //indexOf:返回数组项的索引位置
            let num = parseInt(arrnum[index]) + parseInt(inputvalue); //sid对应的数量 + 当前新加的数量
            arrnum[index] = num;
            localStorage.setItem('localnum', arrnum); //再存储到本地存储中
        } else { //不存在，将商品的sid和数量存储到本地存储中
            arrsid.push(sid); //因为多个商品，先写入数组
            localStorage.setItem('localsid', arrsid); //再存储到本地存储中
            arrnum.push(inputvalue); //获取商品的数量，写入数组
            localStorage.setItem('localnum', arrnum); //再存储到本地存储中
        }
        alert('加入购物车按钮触发了');
    });
}();